<template>
    <div class="anni">
        <div class="center-1">
            <div class="header-menu">
                <div>
                    <img class="head-img" src="../assets/imgs/lingjiuqi.png" alt="" />
                </div>
                <el-menu background-color="transparent" text-color="#FFFFFF" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1"> 首页 </el-menu-item>
                    <el-menu-item index="2"><a href="#introduce" @click.prevent="scrollToCase('introduce')">核心业务</a> </el-menu-item>
                    <el-menu-item index="3"><a href="#case" @click.prevent="scrollToCase('case')">开发案例</a></el-menu-item>
                    <el-menu-item index="4"><a href="#advantages" @click.prevent="scrollToCase('advantages')">定制流程</a></el-menu-item>
                    <el-menu-item index="5"><a href="#advantage" @click.prevent="scrollToCase('advantage')">我们的优势 </a></el-menu-item>
                    <el-menu-item index="6"><a href="#connection" @click.prevent="scrollToCase('connection')">联系我们</a></el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="center-2">
            <img class="introduce" src="../assets/imgs/jieshao.png" />
        </div>
        <!-- 核心 -->
        <div id="introduce" class="center-3">
            <img class="Core" src="../assets/imgs/hexin.png" />
        </div>
        <!-- 案例 -->
        <div id="case" class="center-4">
            <div class="case-title">
                <img src="../assets/imgs/anlititle.png" />
            </div>
            <div class="case-conter">
                <div class="case-conter-main">
                    <div class="case-item" v-for="(item, index) in caseListOne" :key="index" @mouseenter="activeIndex = index" @mouseleave="activeIndex = null">
                        <img :class="`itemHover${item.id}`" :src="require(`@/assets/imgs/${item.img}`)" />
                        <div class="name">{{ item.name }}</div>
                        <img class="item-dis" :class="{ active: activeIndex === index && index !== 4, finally: activeIndex === index && index === 4 }" :src="require(`@/assets/imgs/${item.hover}`)" />
                    </div>
                </div>
                <div class="case-conter-main">
                    <div class="case-item" v-for="(item, index) in caseListTow" :key="index" @mouseenter="activeTowIndex = index" @mouseleave="activeTowIndex = null">
                        <img :class="`itemHover${item.id}`" :src="require(`@/assets/imgs/${item.img}`)" />
                        <div class="name">{{ item.name }}</div>
                        <img
                            class="item-dis"
                            :class="{ active: activeTowIndex === index && index !== 4, finally: activeTowIndex === index && index === 4 }"
                            :src="require(`@/assets/imgs/${item.hover}`)"
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- 流程 -->
        <div id="advantages">
            <img class="img-top" src="../assets/imgs/liucheng.png" />
        </div>
        <!-- 优势 -->
        <div id="advantage">
            <img class="img-top" src="../assets/imgs/youshi.png" />
        </div>
        <div id="partners">
            <img class="img-top" src="../assets/imgs/hezuo.png" />
        </div> 
        <!-- 联系我们 -->
        <div id="connection" class="center-5">
            <div class="case">
                <img class="case-img" src="../assets/imgs/lianxi.png" />
                <div class="footer">
                    <div id="mapContainer" class="conner-gaode" style="width: 530px; height: 300px"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            caseListOne: [],
            caseListTow: [],
            activeIndex: null,
            activeTowIndex: null,
            map: null,
            marker: null,
            position: [104.07518, 30.68594] // 成都坐标点（根据实际需求修改）
        }
    },
    created() {
        this.caseListOne = [
            { name: '物联网系统', img: 'wulian.png', id: 1, hover: 'wulian1.png' },
            { name: '商城系统', img: 'shangcheng.png', id: 2, hover: 'shangcheng1.png' },
            { name: '公众号', img: 'gongzonghao.png', id: 3, hover: 'gongzonghao1.png' },
            { name: '直播系统', img: 'zhibo.png', id: 4, hover: 'zhibo1.png' },
            { name: '教育系统', img: 'jiaoyu.png', id: 5, hover: 'jiaoyu1.png' }
        ]
        this.caseListTow = [
            { name: '小程序定制', img: 'xiaochengxu.png', id: 6, hover: 'xiaochengxu1.png' },
            { name: '社交系统', img: 'shejiao.png', id: 7, hover: 'shejiao1.png' },
            { name: '定制开发软件', img: 'dingzhi.png', id: 8, hover: 'dingzhi1.png' },
            { name: '同城服务', img: 'tongcheng.png', id: 9, hover: 'tongcheng1.png' },
            { name: '更多', img: 'gengduo.png', id: 10, hover: 'gengduo1.png' }
        ]
    },
    mounted() {
        this.initMap()
    },
    methods: {
        scrollToCase(e) {
            document.getElementById(e).scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            })
        },
        //打开弹窗，并设置定位（这里顺便搞的经纬度）
        // openChooseMap() {
        //     this.$refs.mapSel.showMap({
        //         longitude: '120',
        //         latitude: '120'
        //     })
        // },

        // //获取最新经纬度
        // getLoc(loc) {
        //     console.log(loc, '这个是最新的经纬度')
        // },
        // initMap() {
        //     // 创建地图实例
        //     this.map = new AMap.Map('container', {
        //         zoom: 15, // 地图级别
        //         center: this.position, // 地图中心点
        //         viewMode: '3D' // 3D模式
        //     })

        //     // 添加标记点
        //     this.marker = new AMap.Marker({
        //         position: this.position,
        //         map: this.map
        //     })

        //     // 添加控件
        //     this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
        //         // 添加工具条
        //         this.map.addControl(new AMap.ToolBar())
        //         // 添加比例尺
        //         this.map.addControl(new AMap.Scale())
        //     })
        // }
        initMap() {
            this.map = new AMap.Map('mapContainer', {
                center: [104.07518, 30.68594], // 设置地图中心点
                zoom: 17 // 设置地图缩放级别
            })

            // 添加标记点
            this.marker = new AMap.Marker({
                position: this.position,
                map: this.map
            })
            // const geolocation = new AMap.Geolocation({
            //     enableHighAccuracy: true, // 是否使用高精度定位，默认为false
            //     timeout: 10000, // 超过10秒后停止定位，默认为无穷大
            //     buttonPosition: 'RB', // 定位按钮的位置
            //     buttonOffset: new AMap.Pixel(10, 10) // 定位按钮的偏移量
            // })
            // map.addControl(geolocation)
            // geolocation.getCurrentPosition()
        }
    },
    beforeDestroy() {
        // 销毁地图
        if (this.map) {
            this.map.destroy()
        }
    }
}
</script>
<style scoped lang="less">
.map-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.map {
    width: 100%;
    height: 500px; /* 根据需求调整高度 */
}
.anni {
    width: 100%;
    height: 100%;
    .center-1 {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 900px;
        background-color: #f5f5f5;
        .header-menu {
            display: flex;
            width: 1440px;
            height: 900px;
            justify-content: space-between;
            background: url('/src/assets/imgs/head1.png') no-repeat;
            .head-img {
                margin: 30px 0 0 35px;
            }
            .el-menu-demo {
                margin-top: 24px;
                height: 40px;
                display: flex;
                justify-content: flex-end;
            }

            .el-menu.el-menu--horizontal {
                border-bottom: none;
            }

            .header-name {
                display: flex;
                justify-content: space-around;
            }
            /deep/.el-submenu__title,
            /deep/.el-menu-item {
                font-size: 15px;
                height: 40px !important;
                line-height: 40px !important;
            }
            /deep/.el-menu-item:hover {
                background: transparent !important;
            }
        }
    }
    .center-2 {
        .introduce {
            position: relative;
            top: -80px;
        }
    }
    .Core {
        margin: 30px 0 50px 0;
    }

    .center-5 {
        .case {
            // height: 784px;
            height: 693px;
            position: relative;
            margin-top: 171px;
            background-color: #f5f5f5;
            .case-img {
                position: absolute;
                top: -120px;
                left: 0;
                right: 0;
                border: 0;
                z-index: 2;
                margin: auto;
                width: 1440px;
            }
        }
        .footer {
            width: 1440px;
            height: 590px;
            margin: auto;
            display: flex;
            position: relative;
            z-index: 3;
            .conner-gaode {
                position: absolute;
                z-index: 999;
                top: 240px;
                left: 627px;
            }
        }
    }
    .img-top {
        margin-top: 100px;
    }
}
.center-4 {
    height: 784px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .case-title {
        flex: 1;
    }
    .case-conter {
        width: 100%;
        flex: 0 0 667px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .case-conter-main {
            width: 1440px;
            display: flex;
            padding: 70px 100px;
            justify-content: space-around;
            .case-item {
                width: 180px;
                height: 200px;
                display: flex;
                position: relative;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                margin: 0px 30px;
                background: #ffffff;
                border-radius: 20px;
                border: 1px solid #4269e2;
                transition: all 0.3s;
                img {
                    width: 80px;
                }
                .name {
                    font-size: 20px;
                    color: #474747;
                    margin-top: 20px;
                }
            }
        }
    }
}
.item-dis {
    display: none;
}
.active,
.finally {
    position: absolute;
    width: 440px !important;
    height: 460px;
    display: inline-block;
    /* padding: 20px; */
    top: 78px;
    left: 140px;
    z-index: 99;
    border-radius: 10px;
    transform: translate(100, 100);
    // transform: scale() 图片等比例放大倍数;
    transition: opacity 3s ease;
}
.finally {
    left: -400px;
}
</style>
